<script lang="ts" setup>
import mcht from '@/api/mcht'
import { useAppStore } from '@/store'
import { throttle } from '@/utils/shared.ts'
import dayjs from 'dayjs'

const {
  windowHeight,
  customBarHeight,
} = storeToRefs(useAppStore())

function merchantType(type: string) {
  return {
    1: '个体工商户',
    2: '企业',
    3: '小微商户',
    4: '事业单位',
    5: '政府机关',
    6: '其他组织',
  }[type]
}
function merchantStatus(status: string) {
  return {
    0: '正常',
    1: '冻结',
    2: '注销',
    3: '新增',
    // 0: '正常',
    // 1: '新增待审批',
    // 2: '修改待审批',
    // 3: '注销待审批',
    // 4: '冻结待审批',
    // 5: '解冻待审批',
    // 6: '新增审批拒绝',
    // 7: '修改审批拒绝',
    // 8: '新增',
    // A: '冻结',
    // B: '注销',
  }[status]
}

function storeStatus(status: string) {
  return {
    0: '正常',
    2: '注销',
    3: '新增',
    4: '核查',
    5: '拒绝',
  }[status]
}

const form = ref({
  mchtNo: '',
  mchtName: '',
  shopId: '',
  shopName: '',
  startApplyDate: dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
  endApplyDate: dayjs().format('YYYY-MM-DD'),
})

const total = ref(0)
const page = ref(1)
const pageSize = ref(5)
const loading = ref<boolean>(false)
const end = ref<boolean>(false)
const merchantList = ref([])

const throttledGetList = throttle(getList, 600)

function query() {
  end.value = false
  merchantList.value = []
  // getList(1)
  throttledGetList(1)
}

async function getList(p: number) {
  const newForm = JSON.parse(JSON.stringify(form.value))
  loading.value = true
  const { data } = await mcht.getMerchantInfoList(Object.assign(newForm, {
    pageNum: p,
    pageSize: pageSize.value,
    startApplyDate: dayjs(form.value.startApplyDate).format('YYYYMMDD'),
    endApplyDate: dayjs(form.value.endApplyDate).format('YYYYMMDD'),
  }))
  loading.value = false
  if (data.status === 'success') {
    total.value = data.data.total
    page.value = data.data.pageNum

    let lists = data.data.mchtInfos
    if (lists) {
      lists.forEach((e) => {
        e.fristName = e.mchtCnAbbr.charAt(0)
      })
    }

    merchantList.value = merchantList.value.concat(lists)
    if (page.value * pageSize.value >= total.value) {
      end.value = true
    }
    else {
      end.value = false
    }
  }
}

function scrolltolower() {
  if (!end.value) {
    getList(page.value + 1)
  }
}
function goDetail(item: any) {
  let url = `/pages/my/merchant/detail?mchtNo=${item.mchtNo}`
  if (item.shopId) {
    url += `&shopId=${item.shopId}`
  }
  uni.navigateTo({
    url,
  })
}

onMounted(() => {
  let result = [form.value.startApplyDate, form.value.endApplyDate]
    .filter(item => item)
    .join('/');
  if (!result) {
    result = '全部'
  }
  searchKey.value = result
  resetList()
  query()
})

function resetList() {
  merchantList.value = []
  total.value = 0
  page.value = 1
  end.value = false
}

const popupMask = ref<boolean>(false)
const popupContainer = ref<boolean>(false)
const searchKey = ref<string>('全部')

function show_popup() {
  popupMask.value = true
  popupContainer.value = true
}

function hide_popup() {
  popupMask.value = false
  popupContainer.value = false
}

function searchList() {
  let result = [form.value.startApplyDate, form.value.endApplyDate,]
    .filter(item => item)
    .join('/');
  if (!result) {
    result = '全部'
  }
  searchKey.value = result
  resetList()
  query()
  hide_popup()
}
function clearSearchList() {
  // resetForm()
  // searchKey.value = '全部'
  // resetList()
  // query()
}

function resetForm() {
  form.value.mchtNo = ''
  form.value.mchtName = ''
  form.value.shopId = ''
  form.value.shopName = ''
  form.value.startApplyDate = dayjs().subtract(3, 'month').format('YYYY-MM-DD')
  form.value.endApplyDate = dayjs().format('YYYY-MM-DD')
}
</script>

<template>
  <!-- 弹出框结构 -->
  <div class="li-popup">
    <div class="popup-mask" :class="popupMask ? 'popup-mask-show' : ''" @click="hide_popup">
    </div>
    <div class="popup-container" :class="popupContainer ? 'popup-container-show' : ''">
      <div class="popup-content">
        <div class="popup-body">
          <nut-form ref="ruleForm" :model-value="form">
            <nut-form-item label="商户号" prop="mchtNo">
              <nut-input v-model="form.mchtNo" class="nut-input-text" placeholder="请输入商户号" type="text" />
            </nut-form-item>
            <nut-form-item label="商户名" prop="mchtName">
              <nut-input v-model="form.mchtName" class="nut-input-text" placeholder="请输入商户名" type="text" />
            </nut-form-item>
            <nut-form-item label="门店号" prop="shopId">
              <nut-input v-model="form.shopId" class="nut-input-text" placeholder="请输入门店号" type="text" />
            </nut-form-item>
            <nut-form-item label="门店名" prop="shopName">
              <nut-input v-model="form.shopName" class="nut-input-text" placeholder="请输入门店名" type="text" />
            </nut-form-item>
            <nut-form-item label="申请起始日期">
              <date-picker v-model="form.startApplyDate" title="申请起始日期" />
            </nut-form-item>
            <nut-form-item label="申请结束日期">
              <date-picker v-model="form.endApplyDate" title="申请结束日期" />
            </nut-form-item>
          </nut-form>
          <div class="li-searchBar-btn">
            <div class="li-cz shake_o" @click="resetForm">重置</div>
            <div class="li-ss shake_o" @click="searchList">搜索</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="query">
    <div class="li-searchBar">
      <div class="li-rantangle">
        <div class="li-btnleft li-butStyle" :class="searchKey !== '全部' ? 'li-lftactive' : ''" @click="clearSearchList">
          <div class="li-texts">{{ searchKey }}</div>
        </div>
        <div class="li-btnright li-butStyle" :class="searchKey !== '全部' ? 'li-ritactive' : ''" @click="show_popup">筛选
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 120rpx;"></div>

    <div class="list">
      <template v-if="merchantList.length > 0">
        <scroll-view scroll-y :style="{ height: `${windowHeight - customBarHeight - 40 - 40}px` }"
          @scrolltolower="scrolltolower">
          <div class="li-card-item shake_o shadow" v-for="(item, index) in merchantList" :key="index"
            @click="goDetail(item)">
            <div class="content-box1"
              :class="item.mchtStatus === '0' ? 'b-c1' : item.mchtStatus === '3' ? 'b-c0' : item.mchtStatus === '4' ? 'b-c3' : 'b-c2'">
              <div class="cb-lft">
                <div class="first">{{ item.fristName }}</div>
                <div class="info">
                  <div class="name">{{ item.mchtCnAbbr }}</div>
                  <div class="id">{{ item.mchtNo }}</div>
                </div>
              </div>
              <div class="cb-rit"
                :class="item.mchtStatus === '0' ? 'c1' : item.mchtStatus === '3' ? 'c0' : item.mchtStatus === '4' ? 'c3' : 'c2'">
                {{ item.RECORDTYPE === 'MERCHANT' ? merchantStatus(item.mchtStatus) :
                storeStatus(item.mchtStatus) }}</div>
            </div>
            <div class="content-box2">
              <div class="item" v-if="item.shopName">
                <div class="lable">门店名</div>
                <div class="name">{{ item.shopName }}</div>
              </div>
              <div class="item" v-if="item.shopId">
                <div class="lable">门店号</div>
                <div class="name">{{ item.shopId }}</div>
              </div>
              <div class="item">
                <div class="lable">商户类型</div>
                <div class="name">{{ merchantType(item.merType) }}</div>
              </div>
            </div>
            <div class="content-bot">
              <div class="cbt-lft">{{ item.RECORDTYPE === 'MERCHANT' ? '商户' : '门店' }}申请日期:{{ item.applyDate }}</div>
              <div class="cbt-rit">查看<i class="i-ri:arrow-right-s-line"></i></div>
            </div>
            <div style="padding-bottom: 10rpx;"></div>
          </div>

          <div v-if="end" class="end">没有更多数据了</div>
          <div v-if="loading" class="loading">
            <nut-icon name="loading" />
            数据加载中...
          </div>
        </scroll-view>
      </template>
      <nut-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "商户信息",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.list
  padding: 20rpx
  .item
    background-color: #fff
    border-radius: 6px
    .line
      margin-bottom: 6px
      .key
        display: inline-block
        margin-right: 12px
      .value
        display: inline-block
  .end
    text-align: center
    color: #8e8e8e
  .loading
    text-align: center
    color: #8e8e8e

/* 筛选按钮相关 end */
:deep(.nut-cell-group__wrap)
  box-shadow: none!important
  margin: 0!important
  padding: 10rpx 0!important

:deep(.nut-cell-group .nut-cell::after)
  border-bottom: none
</style>
